<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>对话框插件</title>
    <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>

<body>
<h2><pre>
     对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，
     它的调用格式为：$(selector).dialog({options});selector参数为显示弹出对话框的元素，
     通常为&lt;div&gt;，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。
</pre></h2>
<div id="divtest">
    <div class="content">
        <span id="spnName" class="fl">张三</span>
        <input id="btnDelete" type="button" value="删除"  class="fr"/>
    </div>
    <div id='dialog-modal'></div>
</div>

<script type="text/javascript">
    $(function () {
        $("#btnDelete").bind("click", function () { //询问按钮事件
            if ($("#spnName").html() != null) { //如果对象不为空
                sys_Confirm("您真的要删除该条记录吗？");
                return false;
            }
        });
    });
    function sys_Confirm(content) { //弹出询问信息窗口
        $("#dialog-modal").dialog({
            height: 140,
            modal: true,
            title: '系统提示',
            hide: 'slide',
            buttons: {
                '确定': function () {
                    $("#spnName").remove();
                    $(this).dialog("close");
                },
                '取消': function () {
                    $(this).dialog("close");
                }
            },
            open: function (event, ui) {
                $(this).html("");
                $(this).append("<p>" + content + "</p>");
            }
        });
    }
</script>
</body>
</html>